<template>
	<view class="container">
		<view class="middle" :style="{ backgroundImage: 'url(' + bgJoin + ')' }">
			<view class="u-flex u-row-center u-m-b-40" style="color: #fff;font-size: 40rpx;">{{statusTitle}}</view>
			<view class="middle-hy">
				<view class="hybj">
					<view class="fk">
					</view>
					<text class="hy">欢迎！</text>
				</view>
				
				<text class="hyjs">智汇方舟是一个开放的平台，只要您拥有资源<br>即可加入我们，共同发展。</text>
			</view>
			<view class="middle-gz">
				<view class="hybj">
					<view class="fk">
					</view>
					<text class="hy">加入规则</text>
				</view>
				
				<text class="hyjs">1、完成实名注册，完善注册信息；
					2、签订网络版合作协议，建立稳定合作关系；</text>
			</view>
			<view class="middle-lc" :style="{ backgroundImage: 'url(' + bjLc + ')' }">
							<view class="hybj">
								<view class="fk">
								</view>
								<text class="hy">加入流程</text>
							</view>
						<view class="jrlc">
							<view class="tjsq">
								<image src="../../static/throughTrain/yh.png" mode=""></image>
								<text>提交申请</text>
								<view class="sx">
								</view>
							</view>
							<view class="tjsq">
								<image src="../../static/throughTrain/yh.png" mode=""></image>
								<text>平台审核</text>
								<view class="sx">
								</view>
							</view>
							<view class="tjsq">
								<image src="../../static/throughTrain/yh.png" mode=""></image>
								<text>签订协议</text>
								<view class="sx">
								</view>
							</view>
							<view class="tjsq">
								<image src="../../static/throughTrain/yh.png" mode=""></image>
								<text>加入伙伴</text>
							</view>
						</view>	
			</view>
			<view v-show="isPost" class="u-m-t-20 u-flex u-row-center" style="width: 100%;padding:30rpx 0;background: #FFFFFF;border-radius: 20rpx;"><u-radio-group :size="size" :width="width" :wrap="wrap" v-model="value" @change="radioGroupChange" :activeColor="activeColor">
						<u-radio @change="radioChange" v-for="(item, index) in list" 
							:key="index" :name="item.name"
							:shape="shape" :disabled="item.disabled"
						>{{item.name}}</u-radio>
					</u-radio-group></view>

		</view>
		<view class="bottom" v-show="isPost">
				<button class="qrbtn" @click="submit">确认申请</button>
				<view class="agreement zcxy">
					<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
					<view class="agreement-text">
						<text class="tybyd">我已阅读并同意</text>
						<text class="fwxy">《伙伴协议》</text>
					</view>
				</view>
				
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				statusTitle:"",
				isPost:true,
				check:true,
				agreement:'',
				bgJoin: this.$mAssetsPath.bjJoin,
				bjLc: this.$mAssetsPath.bjLc,
				model:{
					"type": 1, //1:区域合伙人,2:项目合伙人,3:加入联盟
				},
				list: [
					{
						name: '区域合伙人',
						value:1,
						checked: true,
						disabled: false
					},
					{
						name: '项目合伙人',
						value:2,
						checked: false,
						disabled: false
					},
					{
						name: '加入联盟',
						value:3,
						checked: false,
						disabled: false
					}
				],
				disabled: false,
				result: '区域合伙人',
				shape: 'circle', 
				value: '区域合伙人',
				activeColor: '#2979ff',
				size: 34,
				wrap: false,
				width: 'auto'
			}
		},
		onLoad(){
			this.initPage();
		},
		methods:{
			async initPage(){
				let result = await this.$apis.checkIsJoin();
				if(result.data.result){
					this.isPost = false;
					this.statusTitle = result.data.statusTitle;
				}
			},
			// 勾选版权协议
			checkboxChange(e) {
				this.agreement = e.value;
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				this.model.name = e;
				for(var i in this.list){
					if(this.list[i].name == e){
						this.model.type = this.list[i].value;
					}
				}
				console.log(e);
			},
			async submit() {
				if(!this.check) return this.$u.toast('请勾选协议');
				if(this.model.type){
					let result = await this.$apis.indexAddUserJoinApply(this.model);
					if(result.code == 200){
						this.isPost = false;
						this.$u.toast('申请已提交');
						return;
					}
				}
				
			},
		},
		
	}
</script>

<style scoped lang="scss">
page {
	background-color: #F4F4F4;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999;
}
	.middle {
		background-repeat: no-repeat;
		background-size: 100% 320rpx;
		background-position: 0 -20px;
	
		display: flex;
		flex-direction: column;
		padding: 80rpx 30rpx 30rpx 30rpx;
		.middle-hy{
			height: 200rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}
		.hybj{
			display: flex;
			.fk{
				width: 10rpx;
				height: 40rpx;
				background-color: #4B9CFF;
				margin-top: 27rpx;
				opacity: 0.4;
			}
			.hy{
				font-size: 40rpx;
				color: #4B9CFF;
				font-weight: 500;
				margin-top: 16rpx;
				margin-left: 27rpx;
				
			}
		}
		
		.hyjs{
			font-size: 30rpx;
			color: #0D1D36;
			line-height: 44rpx;
			position: relative;
			left: 37rpx;
			top: 18rpx;
		}
		.middle-gz{
			width: 690rpx;
			height: 204rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;
		}
		.middle-lc {
			width: 690rpx;
			height: 401rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-top: 20rpx;
			}
		.jrlc{
			margin-top: 36rpx;
			margin-left: 38rpx;
			font-size: 30rpx;
			color: #0D1D36;
			.tjsq{
				margin-top: -8rpx;
				image{
					width: 26rpx;
					height: 26rpx;
				}
				text{
					margin-left: 21rpx;
				}
				.sx{
					width: 2rpx;
					height: 51rpx;
					background-color: #4B9CFF;
					margin-left: 12rpx;
					margin-top: -10rpx;
				}
			}
			
		}
	}
	.qrbtn{
		width: 662rpx;
		height: 80rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		background-color: #AB61FF;
		text-align: center;
		border-radius: 40rpx;
		margin-top: 80rpx;
	}
	.zcxy{
		display: flex;
		justify-content: center;
		// flex-wrap: nowrap;
		align-items: center;
		padding: 20rpx 0 40rpx 0;
		image{
			margin-left: 165rpx;
			width: 48rpx;
			height: 48rpx;
		}
		.tybyd{
			font-size: 24rpx;
			color: #9DA2B0;
					
		}
		.fwxy{
			font-size: 24rpx;
			color: #FF9E21;
		}
		
	}
	.middle-xz{
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>
